// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Form, notification } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import OptionModal from './OptionModal.js';
import cloneDeep from 'lodash/cloneDeep';
import styles from '../../AllPosition/NewTwoPosition/All.less';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ fund }) => ({
  fund,
}))
@Form.create()
class FuOption extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceModal: {
      data: [],
      total: [],
      code: 0,
    },
  };

  dataSourceModalChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'fund/GetOtionInfo',
      payload: 1,
      callback: res => {
        that.setState({
          dataSourceModal: {
            unfixed: true,
            code: 1,
            data: res.list,
            total: [],
            columns: [
              {
                title: '期权代码',
                dataIndex: 'optionCode',
                type: 'string',
                width: 120,
                sorter: true,
                search: true,
              },
              {
                title: '期权类型',
                dataIndex: 'optionType',
                type: 'string',
                filters: [
                  {
                    text: 'SP',
                    value: 1,
                  },
                  {
                    text: 'SC',
                    value: 2,
                  },
                  {
                    text: 'BP',
                    value: 3,
                  },
                  {
                    text: 'BC',
                    value: 4,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 1) {
                    res = 'SP';
                  }
                  if (value === 2) {
                    res = 'SC';
                  }
                  if (value === 3) {
                    res = 'BP';
                  }
                  if (value === 4) {
                    res = 'BC';
                  }
                  return <span>{res}</span>;
                },
              },
              {
                title: '期权数量',
                width: 80,
                dataIndex: 'optionCount',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                width: 80,
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: 'isin',
                width: 120,
                dataIndex: 'isin',
                type: 'string',
                editable: true,
              },
              {
                title: '保护数量',
                width: 80,
                dataIndex: 'protectCount',
                type: 'number',
                editable: true,
              },
              {
                title: '',
                width: 100,
                render: (value, row, index) => {
                  return  <a href="javascript:void(0);" onClick={this.okSave.bind(this, row)}>
                    确定修改
                  </a>
                },
              },
            ],
          },
        });
      },
    });
  }

  okSave(row) {
    const that = this;
    const { dispatch } = that.props;
    dispatch({
      type: 'fund/BuildProtect',
      payload: {...row,type:2} ,
      callback: res => {
        that.props.dataSourceModalChange();
      },
    });
  }

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'fund/GetProtectList',
      payload: 2,
      callback: res => {
        that.setState({
          dataSource: {
            title: `期权保护`,
            code: 1,
            data: res.list,
            total: ['profit', 'todayProfit', 'positionSize'],
            columns: [
              {
                title: '期权代码',
                dataIndex: 'optionCode',
                type: 'string',
                width: 160,
                search: true,
              },
              {
                title: '期权保护',
                dataIndex: 'protectList',
                align: 'center',
                width: 200,
                render: (value, row, index) => {
                  if (value !== null && typeof value === 'object') {
                    const arr = [];
                    for (let i = 0; i < value.length; i++) {
                      arr[i] = (
                        <div>
                          <div> ISIN: {value[i].isin}</div>
                          <div style={{marginBottom:5}}>保护数量: {value[i].optionCount}</div>
                        </div>
                      );
                    }
                    return <div>{arr}</div>;
                  }
                  return null;
                },
              },
              {
                title: '银行',
                dataIndex: 'bank',
                type: 'string',
                filters: [
                  {
                    text: '瑞银',
                    value: 1,
                  },
                  {
                    text: '花旗',
                    value: 2,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 1) {
                    res = '瑞银';
                  }
                  if (value === 2) {
                    res = '花旗';
                  }
                  return <span>{res}</span>;
                },
              },
              {
                title: '类型',
                dataIndex: 'optionType',
                type: 'string',
                filters: [
                  {
                    text: 'SP',
                    value: 1,
                  },
                  {
                    text: 'SC',
                    value: 2,
                  },
                  {
                    text: 'BP',
                    value: 3,
                  },
                  {
                    text: 'BC',
                    value: 4,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 1) {
                    res = 'SP';
                  }
                  if (value === 2) {
                    res = 'SC';
                  }
                  if (value === 3) {
                    res = 'BP';
                  }
                  if (value === 4) {
                    res = 'BC';
                  }
                  return <span>{res}</span>;
                },
              },
              {
                title: '数量',
                dataIndex: 'optionCount',
                type: 'number',
                sorter: true,
              },
              {
                title: '收盘价',
                dataIndex: 'close',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: '权利金',
                // dataIndex: 'premium',
                //  type: 'number',
                render:(value,row,index)=>{
                  if(index === 0 ){return null}
                  return <span>{window.mathService.mul(row.premium ,row.optionCount)}</span>
                }
              },
              {
                title: '盈利',
                dataIndex: 'profit',
                type: 'number',
                sorter: true,
              },
              {
                title: '昨收',
                dataIndex: 'lastClose',
                type: 'number',
                sorter: true,
              },
              {
                title: '今日盈利',
                dataIndex: 'todayProfit',
                type: 'number',
                sorter: true,
              },
              {
                title: '敞口',
                dataIndex: 'positionSize',
                type: 'number',
                sorter: true,
              },
              {
                title: '行权价',
                dataIndex: 'strikePrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '距执行幅度',
                dataIndex: 'strikePercent',
                width: 110,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
              {
                title: '买入日期',
                dataIndex: 'buyDate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '有效期',
                dataIndex: 'expiry',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },

              // {
              //   title: '保护数量',
              //   dataIndex: 'protectList',
              //   type: 'number',
              //   sorter: true,
              // },
            ],
          },
        });
      },
    });
  }

  openVisible() {
    this.dataSourceModalChange();
    this.setState({
      Visible: true,
    });
  }

  closeVisbile() {
    const that = this;
    this.setState(
      {
        Visible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  handleSave = (row, values) => {
    let data = cloneDeep(this.state.dataSourceModal);
    for (let i = 0; i < data.data.length; i++) {
      let item = data.data[i];
      if(row.id === item.id){
        let property = this.getItemsArr(values)[0];
        item[property] = values[property];
      }
    }
    this.setState({
      dataSourceModal:data
    })
  };

  getItemsArr(o)
  {
    let tmpArr = [];
    for(let item in o)
    {
      tmpArr.push(item);
    }
    return tmpArr;
  }


  render() {
    const { Visible, dataSourceModal, dataSource } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          {/* <Button type="danger" onClick={this.clear.bind(this)} style={{marginBottom:10,marginRight:25}} ghost>清空生成信息</Button> */}
          <Button
            type="primary"
            onClick={this.openVisible.bind(this)}
            style={{ marginBottom: 10, marginRight: 25 }}
            ghost
          >
            标记保护期权
          </Button>

          <br />
          <br />
          <StandardTablePro
            dataSource={dataSource}
          />
          <OptionModal
            visible={Visible}
            dataSource={dataSourceModal}
            dataSourceModalChange={this.dataSourceModalChange.bind(this)}
            closeVisbile={this.closeVisbile.bind(this)}
            handleSave = {this.handleSave.bind(this)}
            dataSourceChange = {this.dataSourceChange.bind(this)}
            title = {"傅总保护期权" }
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default FuOption;
